<template>
  <div class="idea">
    <!-- header -->
    <van-nav-bar
      title="平台反馈"
      left-text="返回"
      class="idea__nav"
      ref="header"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- content -->
    <van-cell-group class="idea-main">
      <van-field v-model="platformName" placeholder="请输入平台名称" />
      <van-field
        v-model="message"
        rows="5"
        autosize
        type="textarea"
        maxlength="150"
        placeholder="请描述您的问题，以便我们尽快的为您处理"
        show-word-limit
      />
      <van-button type="danger" block>提交反馈</van-button>
    </van-cell-group>
  </div>
</template>

<script>
export default {
  name: "Idea",
  data() {
    return {
      platformName: "",
      message: ""
    };
  },
    mounted() {
    const _this = this;
    this.$nextTick(() => {
      var statusBar = window.api.require('statusBar');
      //异步返回结果：
      statusBar.getStatusBarHeight(function(ret){
        _this.$refs.header.$el.style.height = (ret.statusHeight + 44) + 'px';
        _this.$refs.header.$el.style.paddingTop = ret.statusHeight + 'px';
        _this.$refs.header.$el.getElementsByClassName(
          "van-nav-bar__left"
        )[0].style.top = ret.statusHeight + "px";
      });
    });
  },
  methods: {
    // 返回
    onClickLeft() {
      window.api.closeWin();
    }
  }
};
</script>

<style lang="scss" scoped>
.idea {
  width: 100%;
  @include flex(
    $direction: column,
    $justifyContent: flex-start,
    $flexWrap: nowrap
  );
  .idea-main {
    width: 100%;
    .van-button {
      width: 343px;
      margin-left: 16px;
      margin-top: 30px;
      padding: 0 15px;
    }
  }
}
</style>
